<template>
  <div>
    <a-row :gutter="9">
      <a-col :span="8">
        <a-input-search
          placeholder="请输入关键字"
          enter-button
          @search="onSearch"
        />
      </a-col>
      <a-col :span="12">
        <a-button type="primary" @click="addUser"> 添加用户 </a-button>
      </a-col>
    </a-row>
    <!-- table表格 -->
    <div class="table">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        :loading="loading"
        :pagination="false"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      >
        <template slot="idx" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="mg_state" slot-scope="text, record">
          <a-switch @change="onChange(record)" :checked="record.mg_state" />
        </template>
        <template slot="options" slot-scope="text, record">
          <a-row :gutter="2">
            <a-col :span="4">
              <a-button
                type="primary"
                shape="circle"
                icon="edit"
                @click="editUser(record)"
              />
            </a-col>
            <a-col :span="4">
              <a-popconfirm
                title="你确定要删除吗?"
                ok-text="是的"
                cancel-text="再想想"
                @confirm="deleteUser(record.id)"
              >
                <a-button type="primary" shape="circle" icon="delete" />
              </a-popconfirm>
            </a-col>
            <a-col :span="4">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>分配权限</span>
                </template>
                <a-button
                  type="primary"
                  shape="circle"
                  icon="appstore"
                  @click="AssignP(record)"
                />
              </a-tooltip>
            </a-col>
          </a-row>
        </template>
      </a-table>
    </div>
    <!-- 分页 -->
    <a-pagination
      size="small"
      :total="total"
      :pageSize="queryInfo.pagesize"
      :pageSizeOptions="['5', '10', '15', '20']"
      :showSizeChanger="true"
      show-size-changer
      show-quick-jumper
      @showSizeChange="changeSize"
      @change="changepage"
    />
    <!-- 添加用户对话框 -->
    <addUser :isAddUserModel="isAddUserModel" @cancelAddUser="cancelAddUser" />
    <!-- 修改用户信息 -->
    <editUser
      :iseditUserModel="iseditUserModel"
      @canceleditUser="canceleditUser"
      :currentUser="currentUser"
    />
    <!-- 分配权限 -->
    <assignPermissions
      :AssignPUser="AssignPUser"
      :isAssignPermissions="isAssignPermissions"
      @cancelAssignP="cancelAssignP"
    />
  </div>
</template>

<script>
import addUser from "./addUser.vue";
import editUser from "./editUser.vue";
import assignPermissions from "./AssignPermissions.vue";
export default {
  components: {
    addUser: addUser,
    editUser: editUser,
    assignPermissions: assignPermissions,
  },
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "idx",
          scopedSlots: { customRender: "idx" },
        },
        {
          title: "用户名",
          dataIndex: "username",
        },
        {
          title: "手机号",
          className: "column-money",
          dataIndex: "mobile",
        },
        {
          title: "角色",
          dataIndex: "role_name",
        },
        {
          title: "邮箱",
          dataIndex: "email",
        },
        {
          title: "是否禁用",
          dataIndex: "mg_state",
          scopedSlots: { customRender: "mg_state" },
        },
        {
          title: "操作",
          dataIndex: "options",
          scopedSlots: { customRender: "options" },
        },
      ],
      data: [],
      queryInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 每页显示多少数据
        pagesize: 5,
      },
      isAddUserModel: false,
      iseditUserModel: false,
      isAssignPermissions: false,
      //当前修改的用户信息
      currentUser: "",
      //当前分配权限的用户信息
      AssignPUser: "",
      total: 0,
      //远程加载
      loading: true,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    //获取用户列表数据
    async loadData() {
      const { data: res } = await this.$http.get("users", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.info(res.meta.msg);
      }
      this.loading = false;
      this.data = res.data.users;
      this.total = res.data.total;
    },
    //根据关键字搜索用户
    onSearch(ev) {
      this.queryInfo.query = ev;
      this.loadData();
    },
    //添加用户
    addUser() {
      this.isAddUserModel = true;
    },
    //取消模态框添加用户
    cancelAddUser() {
      this.isAddUserModel = false;
    },
    //取消修改模态框
    canceleditUser() {
      this.iseditUserModel = false;
    },
    //改变页码
    changeSize(current, size) {
      this.queryInfo.pagenum = 1;
      this.queryInfo.pagesize = size;
      this.loadData();
    },
    //改变页数
    changepage(pagenum) {
      this.queryInfo.pagenum = pagenum;
      this.loadData();
    },
    //删除用户
    async deleteUser(userid) {
      const { data: res } = await this.$http.delete("users/" + userid);
      if (res.meta.status !== 200) {
        return this.$message.success(res.meta.msg);
      }
      this.$message.success(res.meta.msg);
      this.loadData();
    },
    //改变用户状态
    async onChange(record) {
      const { data: res } = await this.$http.put(
        `users/${record.id}/state/${!record.mg_state}`
      );
      if (res.meta.status !== 200) {
        return this.$message.success(res.meta.msg);
      }
      record.mg_state = !record.mg_state;
      this.$message.success(res.meta.msg);
    },
    //修改用户
    editUser(record) {
      this.iseditUserModel = true;
      this.currentUser = record;
      this.$children[4].changeForm();
    },
    //分配权限
    AssignP(record) {
      this.AssignPUser = record;
      this.isAssignPermissions = true;
    },
    //关闭分配权限弹框
    cancelAssignP() {
      this.isAssignPermissions = false;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
